<!--ref和reactive的使用-->
<script setup lang="ts">
import {reactive, ref} from "vue";

//语法糖
let num: number = 100;
function getNum() {
  console.log(num)
}


/*let name: string = '张三';//这样写插值表达式中的name不会改变，不在页面中展示时可以这样写
function changeName() {
  name = '李四'
  console.log('修改changeName')
  console.log(name)    //这样写插值表达式中的name不会改变
}*/

// ref的使用   ref实现响应式数据,主要用于基本数据类型，引用数据类型也能用
// let name=ref('张三');  //使用ref需要引入import文件
let name=ref<string>('张三');  //设置数据类型
function changeName() {
  console.log('修改changeName')
  console.log(name)
  // 获取时用.value去获取
  console.log(name.value)
  name.value='李四'
}


// 对象类型
interface ObjType1 {
  name: string,
  age: number
}
let obj = ref<ObjType1>({
  name: '王五',
  age: 18
})
function changeObj() {
  console.log(obj.value)
  // console.log(obj.value.age)
  obj.value.age++
  console.log(obj.value.age)
}


// 数组类型[{},{}]
interface ObjType2 {
  id: number,
  title: string
}
// let obj1=ref<ObjType2[]>([{id:1,title:'1'},{id:2,title:'2'},{id:3,title:'3'}]);
let obj2: ObjType2[] = [{id: 1, title: '1'}, {id: 2, title: '2'}, {id: 3, title: '3'}]





// reactive的使用    声明响应式的引用数据类型,不能给基本数据类型使用
// let str=reactive<boolean>('hhh')
interface ObjType3 {
  sex:string,
  age:number
}
/*let obj1:ObjType3={   //用这种方式展示在页面中的数据（插值表达式）不会改变，使用reactive方法来解决这个问题
  sex:'男',
  age:20
}*/
let obj1=reactive<ObjType3>({
  sex:'男',
  age:20
})
function changeObj1(){
  console.log(obj1)
  // console.log(obj1.age)
  obj1.age++
  console.log(obj1.age)
}


// 嵌套属性   响应式转换是“深层的”：会影响对象内部所有嵌套的属性
interface DataType {
  msg:string
}
interface ObjType4 {
  sex:string,
  age:number,
  data:DataType
}
let obj4=reactive<ObjType4>({
  sex:'男',
  age:30,
  data: {   //需要用interface去定义数据类型
    msg:'成功'
  }
})
function changeObj4(){
  console.log(obj4)
  console.log(obj4.data)
  // console.log(obj4.data.msg)
  obj4.data.msg='失败'
  console.log(obj4.data.msg)
}


// 数组类型
let arr=reactive<number[]>([1,2,3])
function changeArr(){
  console.log(arr)
  arr[0]=0
  console.log(arr[0])
  console.log(arr)
}
</script>

<template>
  index2
  {{ num }}-----{{ name }}---{{obj.age}}----{{obj1.age}}----{{obj4.data.msg}}---{{arr[0]}}
  <button @click="getNum">getNum</button>
  <button @click="changeName">changeName</button>
  <button @click="changeObj">changeObj</button>
  <button @click="changeObj1">changeObj1</button>
  <button @click="changeObj4">changeObj4</button>
  <button @click="changeArr">changeArr</button>


  <div class="box1">
    <div class="box2"></div>
  </div>
</template>

<style scoped lang="less">
@color: red;
.box1 {
  width: 300px;
  height: 200px;
  background-color: @color;

  .box2 {
    width: 100px;
    height: 100px;
    background-color: green;
  }
}
</style>
